<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../../lib/bootstrap@3.3.4/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        #content {
            padding: 20px;
        }

        table {
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div id="content">
        <form>
            <div class="form-group">
                <label for="exampleName">姓名：</label>
                <input type="text" class="form-control" id="exampleName" placeholder="姓名">
            </div>
            <div class="form-group">
                <label for="exampleTel">电话：</label>
                <input type="tel" class="form-control" id="exampleTel" placeholder="电话">
            </div>
            <div class="form-group">
                <label for="exampleEmail">邮箱：</label>
                <input type="email" class="form-control" id="exampleEmail" placeholder="邮箱">
            </div>
            <button type="submit" class="btn btn-default saveBtn">保存</button>
        </form>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>电话</td>
                    <td>邮箱</td>
                    <td>功能</td>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>
                            <button class="delete">删除</button>
                            <button class="edit">修改</button>
                        </td>
                    </tr> -->
            </tbody>
        </table>
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleNameEdit">姓名：</label>
                <input type="text" class="form-control" id="exampleNameEdit" placeholder="姓名">
            </div>
            <div class="form-group">
                <label for="exampleTelEdit">电话：</label>
                <input type="email" class="form-control" id="exampleTelEdit" placeholder="电话">
            </div>
            <div class="form-group">
                <label for="exampleEmailEdit">邮箱：</label>
                <input type="email" class="form-control" id="exampleEmailEdit" placeholder="邮箱">
            </div>
            <button type="submit" class="btn btn-default saveEdit">修改</button>
        </form>

    </div>
    <script>         
        var saveBtn = document.querySelector('.saveBtn');
        var table = document.querySelector('table');
        var tbo = document.querySelector('table tbody');
        var saveEdit = document.querySelector('.saveEdit');
        saveBtn.onclick = function (e) {
            e.preventDefault();
            var obj = {};
            obj.name = exampleName.value;
            obj.tel = exampleTel.value;
            obj.email = exampleEmail.value;

            var all = localStorage.getItem('listNew');
            if (all) {
                all = JSON.parse(all);
                all.push(obj);
                localStorage.setItem('listNew', JSON.stringify(all));
            } else {
                localStorage.setItem('listNew', JSON.stringify([obj]));
            }
            tbo.innerHTML += `
                            <tr>
                                <td>${obj.name}</td>
                                <td>${obj.tel}</td>
                                <td>${obj.email}</td>
                                <td>
                                    <button class="delete">删除</button>
                                    <button class="edit">修改</button>
                                </td>
                            </tr>
                        `

        }

        getAll();
        function getAll() {
            var all = localStorage.getItem('listNew');
            var str = '';
            all = JSON.parse(all);
            if (all) {
                all.forEach(element => {
                    str += `
                            <tr>
                                    <td>${element.name}</td>
                                    <td>${element.tel}</td>
                                    <td>${element.email}</td>
                                    <td>
                                        <button class="delete">删除</button>
                                        <button class="edit">修改</button>
                                    </td>
                            </tr>
                            `
                });
                tbo.innerHTML += str;

            }

        }

        table.addEventListener('click', function (e) {
            var event = e || window.event;
            var target = event.target || event.srcElement;

            if (target.className == 'delete') {
                var tr = target.parentNode.parentNode;
                var index = tr.rowIndex - 1;

                tr.remove();
                var all = localStorage.getItem('listNew');
                all = JSON.parse(all);
                all.splice(index, 1);
                localStorage.setItem('listNew', JSON.stringify(all));
            }
        })

        table.addEventListener('click', function (e) {
            var event = e || window.event;
            var target = event.target || event.srcElement;
            if (target.className == 'edit') {
                var tr = target.parentNode.parentNode;
                index = tr.rowIndex - 1;
                var all = localStorage.getItem('listNew');
                all = JSON.parse(all);
                console.log(all[index]);
                exampleNameEdit.value = all[index].name;
                exampleTelEdit.value = all[index].tel;
                exampleEmailEdit.value = all[index].email;
            }
        })

        saveEdit.onclick = function (e) {
            e.preventDefault();
            var objEdit = {};
            //  console.log(index);
            objEdit.name = exampleNameEdit.value;
            objEdit.tel = exampleTelEdit.value;
            objEdit.email = exampleEmailEdit.value;
            var newNode = document.createElement('tr');
            var str = `
                        <td>${objEdit.name}</td>
                        <td>${objEdit.tel}</td>
                        <td>${objEdit.email}</td>
                        <td>
                            <button class="delete">删除</button>
                            <button class="edit">修改</button>
                        </td>`
            newNode.innerHTML = str;
            var oldNode = tbo.rows[index]
            tbo.replaceChild(newNode, oldNode);
            var all = localStorage.getItem('listNew');
            all = JSON.parse(all);
            all[index] = objEdit;
            console.log(all);
            localStorage.setItem('listNew', JSON.stringify(all));
        }




    </script>

</body>

</html>